<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('基本信息变更')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        基本信息变更
                    </h5>
                    <input type="hidden" id="projectLabelOld" name="projectLabelOld" th:field="${project.projectLabel}">
                </div>
                <div class="ibox-content">
                    <form id="form-step-1" class="form form-horizontal m-t">
                    <div class="tab-content">
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">项目名称：</label>
                                <div>
                                    <input name="projectName" th:field="${project.projectName}" placeholder="请输入项目名称" class="form-control" type="text" maxlength="60" required>
                                    <input type="hidden" id="projectId" name="projectId" th:field="${project.projectId}">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">立项代码：</label>
                                <div>
                                    <input name="projectCode" th:field="${project.projectCode}" class="form-control" placeholder="请输入立项代码" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">项目类型：</label>
                                <div>
                                    <select id="projectType" name="projectType" class="form-control m-b" th:with="type=${@dict.getType('eb_project_type')}">
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"  th:field="${project.projectType}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">所属产业：</label>
                                <div>
                                    <input type="hidden" id="projectIndustryHidder" th:value="${project.projectIndustry}">
                                    <select id="projectIndustry" name="projectIndustry" class="form-control m-b" th:with="type=${@dict.getType('eb_project_industry')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${project.projectIndustry}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3" id="projectWorthExpectDiv" style="display: none">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">项目建成预计年产值（亿元）：</label>
                                <div>
                                    <input name="projectWorthExpect" th:field="${project.projectWorthExpect}" class="form-control" type="text" placeholder="请输入">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">审批类型：</label>
                                <div>
                                    <select name="approveType" class="form-control m-b" th:with="type=${@dict.getType('eb_approve_type')}">
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${project.approveType}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">建设性质：</label>
                                <div>
                                    <select name="constructionType" class="form-control m-b" th:with="type=${@dict.getType('eb_construction_type')}">
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${project.constructionType}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3"  id="isBeginDiv">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">是否开工/复工 ：</label>
                                <div>
                                    <select name="isBegin" class="form-control m-b" th:with="type=${@dict.getType('eb_yes_no')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${project.isBegin}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">项目标签：</label>
                        <label th:each="label:${@dict.getType('eb_project_label')}" class="check-box">
                            <input name="projectLabel" type="checkbox" th:id="'projectLabel' + ${label.dictValue}" th:value="${label.dictValue}" th:text="${label.dictLabel}" onchange="projectBatchChecked(this)">
                        </label>

                        <div style="margin-top: 15px;" class="form-group">
                            <div class="col-sm-3" id="projectBatchDiv" style="display: none">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">“三个一批”批次：</label>
                                <div>
                                    <select name="projectBatch" class="form-control m-b" th:with="type=${@dict.getType('eb_project_batch')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"  th:field="${project.projectBatch}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3" id="fundDemandDiv" style="display: none">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">资金需求（亿元）：</label>
                                <div>
                                    <input name="fundDemand" class="form-control" type="text" placeholder="请输入资金需求"  th:field="${project.fundDemand}">
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 15px;" class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">建设地点：</label>
                                <div>
                                    <select name="projectArea" class="form-control m-b" th:with="type=${@dict.getType('eb_project_area')}">
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${project.projectArea}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">项目详细建设地点：</label>
                                <div>
                                    <input name="projectAddress" th:field="${project.projectAddress}" class="form-control" type="text" placeholder="请输入项目详细建设地点">
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 15px;" class="form-group">
                            <div class="col-sm-5">
                                <label class="col-sm-3 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">地理坐标：</label>
                                <div>
                                    <input name="longitude" th:field="${project.longitude}" class="form-control" style="width: 30%;display: inline-block;" type="text" placeholder="经度" readonly>
                                    <input name="latitude" th:field="${project.latitude}" class="form-control"  style="width: 30%;display: inline-block;" type="text" placeholder="纬度" readonly>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div>
                                    <button type="button" class="btn btn-success" id="button-open-4"><i class="fa fa-globe"></i>地图</button>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 15px;" class="form-group">
                            <div class="col-sm-3 date">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">计划开工时间：</label>
                                <input type="text" class="form-control" name="beginDatePlan" id="beginDatePlan" th:value="${#dates.format(project.beginDatePlan, 'yyyy-MM-dd')}"  placeholder="请输入" readonly/>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">计划竣工时间：</label>
                                <div>
                                    <input id="endDatePlan" name="endDatePlan" class="form-control"  th:value="${#dates.format(project.endDatePlan, 'yyyy-MM-dd')}" type="text" placeholder="请输入" readonly />
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">建设周期（月）：</label>
                                <div>
                                    <input name="constructionCycle" class="form-control" type="text" placeholder="请输入" th:field="${project.constructionCycle}">
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 15px;" class="form-group">
                            <div class="col-sm-9">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">建设内容及规模：</label>
                                <textarea rows="3" cols="2000"  class="form-control" name="projectIntroduct" th:field="${project.projectIntroduct}" placeholder="请输入" required></textarea>
                            </div>
                        </div>
                        <div style="margin-top: 15px;" class="form-group">
                            <div class="col-sm-9">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">存在问题：</label>
                                <textarea rows="3" cols="2000"  class="form-control" name="projectProblem" th:field="${project.projectProblem}" placeholder="请输入"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label is-required" style="font-weight: bold;text-align: left;padding-left: 0px;">单位名称：</label>
                                <div>
                                    <input id="constructorName" name="constructorName" th:field="${project.constructorName}" class="form-control" type="text" placeholder="请输入" required>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">统一社会信用代码：</label>
                                <div>
                                    <input id="constructorCode" name="constructorCode" th:field="${project.constructorCode}" class="form-control" placeholder="请输入" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">法人代表姓名：</label>
                                <div>
                                    <input id="constructorCorp" name="constructorCorp" th:field="${project.constructorCorp}" class="form-control" type="text" placeholder="请输入">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">联系人：</label>
                                <div>
                                    <input id="contactPerson" name="contactPerson"  th:field="${project.contactPerson}" class="form-control" type="text" placeholder="请输入">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-12 control-label" style="font-weight: bold;text-align: left;padding-left: 0px;">手机号码：</label>
                                <div>
                                    <input id="contactPhone" name="contactPhone"  th:field="${project.contactPhone}" class="form-control" placeholder="请输入" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="saveProject();"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>取 消</button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<!--<th:block th:include="include :: select2-js" />-->
<script>
    $(document).ready(function() {
        // 初始化下拉框校验
        jQuery.validator.addMethod("myselected", function (value, element) {
            var result = (value!="请选择");
            return  result;
        }, "请选择");

        if ($("#projectType").val() == 20) {
            $("#projectWorthExpectDiv").show();
        }
    });

    /** 保存项目 */
    function saveProject(){
        var form = $("#form-step-1");
        form.validate().resetForm();
        form.validate().destroy();
        // 1、声明基础校验规则 validateRules
        var validateRules = {
            rules: {
                projectWorthExpect: {number: true/*, gt: 0*/},
                contactPhone: {isPhone: true},
                projectArea: {required: true},
                projectType: {required: true},
                projectIndustry: {required: true},
                //approveType: {required: true},
                constructionType: {required: true},
                constructionCycle:{digits:true},
                contactPhone:{
                    isPhone:true
                }
            }
        };
        // 2、校验项目标签增加rule
        var projectLabels = $.form.selectCheckeds("projectLabel");
        if (projectLabels.indexOf("20") != -1) {
            validateRules.rules.projectBatch = {required: true};
        }
        if (projectLabels.indexOf("40") != -1) {
            validateRules.rules.fundDemand = {required: true, number: true, gt: 0};
        }

        if($("#projectType").val() == 20) {
            validateRules.rules.projectWorthExpect = {/*required: true,*/ number: true/*, gt: 0*/};
        }
        // 2、校验表单
        if(!form.validate(validateRules).form()){
            return;
        }

        var data = {};
        $('.form').each(function (index, form){
            // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
            $.each($(form).serializeArray(), function(i, field) {
                if(data[field.name]) {
                    data[field.name] += ("," + field.value);
                } else {
                    data[field.name] = field.value;
                }
            });
        });

        log.info(data);

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "manage/project/editBasic",
            data : data,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.successTabCallback({'code':'0'});
            }
        });
        // $.operate.saveTab(ctx + "manage/project/add", data);
    }

    /** 项目标签联动 */
    projectBatchChecked = function (checkbox) {
        if (checkbox.checked == true) {
            if (checkbox.value == 20) {
                $("#projectBatchDiv").show();
            }
            if (checkbox.value == 40) {
                $("#fundDemandDiv").show();
            }
        } else {
            if (checkbox.value == 20) {
                $("#projectBatchDiv").hide();
            }
            if (checkbox.value == 40) {
                $("#fundDemandDiv").hide();
            }
        }
    }

    /** 项目类型选择 */
    $("#projectType").change(function () {
        var value = $(this).val();
        $("#projectIndustry").val('');

        $("#projectIndustry option").hide();
        $("#projectIndustry option:eq(0)").show();

        // 当为产业类时，显示 年产值
        if (value == 20) {
            $("#projectWorthExpectDiv").show();

            $("#projectIndustry option:gt(6)").show();
            $("#projectIndustry option:gt(14)").hide();
        } else {
            $("#projectWorthExpect").val('');
            $("#projectWorthExpectDiv").hide();

            if (value == 10) {
                $("#projectIndustry option:lt(7)").show();
                $("#projectIndustry option:gt(7)").hide();
            } else if (value == 30) {
                $("#projectIndustry option:gt(14)").show();
            }
        }
    });

    // 处理projectLabel
    var projectLabel = $('#projectLabelOld').val();
    if (projectLabel) {
        var labelArray = projectLabel.split(',');
        for (var i=0; i < labelArray.length; i++) {
            $('#projectLabel' + labelArray[i]).attr('checked','checked');
            if (labelArray[i] == 20) {
                $("#projectBatchDiv").show();
            }
            if (labelArray[i] == 40) {
                $("#fundDemandDiv").show();
            }
        }
    }
</script>
<script th:inline="javascript">
    var prefix = ctx + "manage/project"

    $("#button-open-4").click(function(){
        var btn = ['<i class="fa fa-check"></i> 选取坐标', '<i class="fa fa-close"></i> 关闭'];
        var options = {
            title: '百度地图拾取坐标',
            width: "620",
            height: "680",
            url: prefix + "/map",
            btn: btn,
            callBack: writeCoordinate
        };
        $.modal.openOptions(options);
    })
    function writeCoordinate(index, layero) {
        var longitude = layero.find("iframe")[0].contentWindow.document.getElementById("longitude").value;
        var latitude = layero.find("iframe")[0].contentWindow.document.getElementById("latitude").value;
        $("#longitude").attr("value", longitude);
        $("#latitude").attr("value", latitude);
        $.modal.close(index);
    }
</script>
<script type="text/javascript">
    $(function(){
        <!-- laydate示例 -->
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            laydate.render({
                elem: '#laydate-demo-1'
            });

            laydate.render({
                elem: '#laydate-demo-2',
                type: 'date'
            });

            laydate.render({
                elem: '#laydate-demo-3',
                type: 'datetime',
                trigger: 'click'
            });

            laydate.render({
                elem: '#laydate-demo-4',
                range: true
            });

            var startDate = laydate.render({
                elem: '#beginDatePlan',
//                max: $('#endDatePlan').val(),
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 结束时间大于开始时间
                    if (value !== '' ) {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });

            var endDate = laydate.render({
                elem: '#endDatePlan',
                min: $('#beginDatePlan').val(),
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });
    });

    $("#projectType").trigger('change');
    var projectIndustryHidder = $("#projectIndustryHidder").val();
    $("#projectIndustry").val(projectIndustryHidder);
</script>
</body>
</html>